html{font-size: 625%}
body{font-size: 0.16rem}
li{list-style: none;}
a{text-decoration: none;}
img{display: block;}
body html{height: 100%;width: 100%;position: relative;}
h1,h2,h3,h4,h5,p,li,ul,body,html{padding:0;margin: 0;}

body{padding-top: 0.5rem;background-color: #ebebeb}
header{width: 100%;height: 50px;line-height: 50px;display: flex; justify-content:space-between;background-color: #282828;font-size: 0.14rem;position: fixed;top: 0;z-index: 88}
/*头部导航*/
.topbar{display: flex; color: #8f8f8f}


.topbar .topbar-list{width: 0.48rem;text-align: center;}
.topbar .title{color: #fff;}
.nav-right{display: flex}
.nav-right a{color:#8f8f8f;display: block;}
.nav-right a .icon-jiantou{font-size: 0.12rem}
.nav-right a.city{padding: 0 0.06rem;}
.nav-right a.my{width: 0.48rem;text-align: center;}

/*正在上映*/
.comingmovie{width: 100%}
.comingmovie ul{width: 100%;}
.comingmovie ul li{margin: 0 0.16rem 0.16rem 0.16rem;padding-top: 0.16rem}
.movie-img img{width: 100%;}
.movie-info{display: flex;justify-content:space-between;background-color: #fff;}
.movie-info .imformation{padding-top: 0.06rem;padding-left: 0.12rem;}
.movie-info .imformation p{font-size: 0.13rem}
.movie-info .imformation p:nth-child(1){color: #222}
.movie-info .imformation p:nth-child(2){color: #ccc}
.movie-info .rating{line-height: 0.5rem;color: orange;padding-right: 0.13rem;font-size: 0.18rem}
.comingmovie .more-button button{display: block; width: 1.6rem;height: 0.3rem;border-radius: 0.3rem;border:1px solid #888;margin: 0 auto 0.3rem;background-color: rgba(225,225,225,0)}

/*即将上映*/
.will-show .title{width: 100%;border-bottom: 1px solid #a8a8a8;margin:0.3rem 0}
 .upcoming{margin: 0 auto;margin-bottom: -0.1rem;width: 0.65rem;height: 0.2rem;font-size: 0.14rem;background-color: #a7a7a7;text-align: center;border-radius: 0.05rem;color: #fff;}
 .movie-info{padding: 0.05rem 0.1rem 0.05rem 0.1rem;}
 .movie-info .imformation{padding:0}
 .movie-info .time{font-size: 0.14rem;color: orange}

/*隐藏点击到相应部分详情*/
.sidebar-container{position: fixed;top: 50px;bottom: 0;left: 0;right: 0;color: #9a9a9a;z-index: 501;}
 .slidebar-overlay{background: rgba(0,0,0,0.5);position: absolute;top: 0px;right: 0;bottom: 0;left: 0;transition: all ease 0.4s;-webkit-transition: all ease 0.4s;}
 .slidebar-overlay nav{border-top: 1px solid #222;box-shadow: 0 1px 1px #363636 inset;background: #282828;position: absolute;display: block;top: 0;right: 110px;bottom: 0;left: 0;transition: all ease 0.4s;-webkit-transition: all ease 0.4s;}
 .slidebar-overlay nav li{height: 0.5rem;line-height: 0.5rem}
 .slidebar-overlay nav li a{justify-content:space-between; display: block;display:flex;width: 100%;padding: 0 16px;border-bottom: 1px dotted #333;color:#9a9a9a;box-sizing: border-box;font-size: 0.14rem}

/*正在热映 即将上映详情*/
.wrap-filmlist{padding-left: 0.15rem;padding-right: 0.15rem}
.tap{height: 46px;margin: 0 auto;border-bottom: solid #fe6e00 1px;display: flex}
.tap div{flex:1;box-sizing: border-box;}
.tap div .router-link-active div{border-bottom: 3px solid orange;box-sizing: border-box;}
.tap div a{display: block;text-align: center;width: 100%;height: 100%;}
.tap div a div{height: 100%;line-height: 0.4rem}

.wrap-filmlist .tap .router-link-active{color: #fe6e00;}
.film-item{padding: 0.2rem 0;border-bottom: dashed 1px #c9c9c9;cursor: pointer;width: 100%;display: flex;width: 100%}
 .item-img{width: 0.6rem;float: }
 .item-img img{width: 100%} .film-item .item-desc{padding-left: 0.15rem;width:70%}
 .item-desc .title{display: flex; justify-content:space-between;align-items:center}
 .item-desc .title .film-name{flex:1;font-size: 16px;line-height: 32px;color: #000;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: bold}
 .item-desc span{font-size: 0.12rem;color:#808080;}
 .item-desc .film-next-arrow{color: #c6c6c6;width: 0.2rem;text-align: center;}
.film-grade{color:orange;width: 0.2rem}
.film-color{color:#8aa2bf;;}

/*详情*/
.m-detail img { width: 100%; }
.m-detail { color: #333; }
.detail-info .u-title { margin: 16px auto; border-left: 16px solid rgb(228, 200, 156); font-size: 16px; padding-left: 4px;}
.detail-info p { height: 18px; overflow: hidden; margin-bottom: 10px; padding-left: 20px; font-size: 12px;}
.detail-info p.desc { height: auto; line-height: 1.5; margin-bottom: 80px; padding-right: 20px;}
.m-detail a { display: inline-block; font-size: 14px; min-width: 156px; height: 36px; line-height: 36px; background-color: #fe8233; border-radius: 18px; color: #fff; text-align: center; position: fixed; bottom: 20px; left: 50%; margin-left: -78px; text-decoration: none; }

/*影院地址详情*/
 .wrap-go .content{padding: 10px 0 12px 16px;cursor: pointer;border-bottom: 1px solid #e1e1e1}
 .wrap-go .wrap-content{width: 75%;}
 .wrap-go .title{height: 40px;line-height: 40px;font-size: 14px;padding-left: 16px;background: #e1e1e1; margin-bottom: 1px;color: #636363;cursor: pointer;    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}
 .wrap-go .address{font-size: 12px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #ccc}
.cinema-title i{color:#fc8558;font-size:normal ;font-size: .12rem;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  margin-left: .05rem;
  vertical-align: top;}

  .cinema-title i:nth-of-type(1){ color: #fc8558;
  border: 1px solid #fc8558;}
   .cinema-title i:nth-of-type(2){  color: #88aec8;
  border: 1px solid #88aec8;}
.wrap-content p span{background-color: #51add0;
  display: inline-block;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 5px;
  color: #fff;
  height: .16rem;
  line-height: .16rem;}

.wrap-content .distance{color:#ccc;font-size:.12rem ;margin-top:0.03rem }

 .side-enter-active {
         animation: side-out 0.5s;
     }
 .side-leave-active {
        animation: side-in 0.5s;
    }

@keyframes side-out{
	0%{
		transform:translateX(-100%);
		background: rgba(0,0,0,0);
	}
	100%{
		transform:translateX(0);
		background: rgba(0,0,0,0.5);
	}
}
@keyframes side-in{
	0%{
		transform:translateX(0);
		background: rgba(0,0,0,0.5);
	}
	100%{
		transform:translateX(-100%);
		background: rgba(0,0,0,0);
	}
}

#login {
  position: absolute;
  min-height: 100%;
  width: 100%;
  background-color: #f6f6f6;
  top: .5rem;
}
#login form {
  padding: 0px .3rem 0px .3rem;
}
#login  form  div {
  margin: .3rem 0 0;
  position: relative;
}
#login form div  input {
  border: none;
  outline: none;
  background-color: #f6f6f6;
  display: block;
  width: 100%;
  height: .34rem;
  padding: .06rem .12rem;
  font-size: .14rem;
  line-height: 1.42857143;
}
#login  form  div ::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.5);
}
#login  form  div  div {
  position: absolute;
  top: .2rem;
  height: .12rem;
  width: 100%;
  border: solid #c4c4c4;
  border-width: 0 1px 1px 1px;
}
#login  form  div span {
  display: block;
  line-height: 16px;
  color: #fe8233;
  padding-left: 8px;
  font-size: .12rem;
}
#login  form  button {
  width: 1.63rem;
  display: block;
  background-color: #fe8233;
  color: #fff;
  border: none;
  border-radius: 36px;
  margin-top: .45rem;
  padding: 8px 12px;
  font-size: .15rem;
  outline: none;
  margin-right: auto;
  margin-left: auto;
}
/*回到顶部*/
.toTop{position: fixed;bottom: 0.1rem;right: 0.1rem;width: 0.5rem;height: 0.5rem;text-align: center;line-height: 0.5rem;background-color: #666;border-radius: 50%}
.toTop i{color: #fff;font-size: 0.22rem}